import * as React from "react";
import * as LocationProps from "../common/locationProps";
import Card from "./card";
import GameBoard from "./gameView/gameBoard";
import GameInfo from "./gameView/gameInfo";
import * as Vector from "../../common/vector";
import * as Othello from "../../domain/othello";

interface GameViewProps {
    readonly board: Othello.Cell[][]
    readonly onCellClicked: (cell: Vector.Vector) => void
    readonly message:string
    readonly errMessage?:string  
}

class GameView extends React.Component<GameViewProps & Partial<LocationProps.LocationProps>> {
    render() {
        const prop = LocationProps.MergeClassNames(["game-view"], this.props);
        return (
            <Card classNames={prop.classNames} id={prop.id}>
                <div className="game-view-body">
                    <GameBoard board ={this.props.board} onCellClicked={this.props.onCellClicked} /> 
                    <GameInfo
                        whiteCount = {this.props.board.reduce((l,r)=>l.concat(r)).filter(x=>x=="White").length}
                        blackCount = {this.props.board.reduce((l,r)=>l.concat(r)).filter(x=>x=="Black").length}           
                        message={this.props.message} 
                        errMessage={this.props.errMessage} />
                </div>
            </Card>
        )
    }
}

export default GameView;